/*
 * @Description: 我的申请列表筛选
 * @Author: Rfan
 * @Date: 2023-02-10 11:12:19
 * @LastEditTime: 2023-02-28 11:03:48
 */

import { Button, Form, Select } from 'antd';
import cs from 'classnames';
import classNames from 'classnames/bind';
import update from 'immutability-helper';
import { useMyApplyContext } from '../contexts/MyApplyContext';
import { FlowModelTypeList } from '@/view/sysMaintenance/FlowMgt/dictionaries';
import { taskStateList } from '../dictionaries';
import type { IPageQuery } from '@/interfaces/global';
import styles from '../styles/applyMain.module.scss';

const cx = classNames.bind(styles);
// select 宽度
const selectWidth = 100;

const PageOperate = () => {
  const { listQuery, setListQuery } = useMyApplyContext();

  const onFinish = (values: any) => {
    console.log('filter finish', values);
    setListQuery(
      update(listQuery, {
        $apply: (state: IPageQuery) => ({
          ...state,
          pageNo: 1,
          param: values
        })
      })
    );
  };

  return (
    <div className={cs('filter-container', cx('operate-wrap'))}>
      <p className="page-title">我的申请</p>
      <Form layout="inline" initialValues={{ taskState: 0, flowType: '' }} onFinish={onFinish}>
        <Form.Item name="taskState" label="状态">
          <Select
            options={taskStateList.map((item) => ({
              value: item.id,
              label: item.name
            }))}
            style={{ width: selectWidth }}
          />
        </Form.Item>
        <Form.Item name="flowType" label="类型">
          <Select
            options={[
              { value: '', label: '全部' },
              ...FlowModelTypeList.map((item) => ({
                value: item.id,
                label: item.name
              }))
            ]}
            style={{ width: selectWidth }}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default PageOperate;
